<template>
    <div class="header" style="border-bottom: solid 0px #e6e6e6;">
        <el-container style="border:1px solid #e3e3;width:100%; height:62px;">
            <el-header>
                <el-row>
                    <el-col :span="4" style="padding-left:10px;">
                        <router-link to="/search">
                            <span class="header_logo">
                                <span>(ByB)</span><em :style='ismini==false?"":"font-size:13px;"'>school</em>
                            </span>
                        </router-link>
                    </el-col>
                
                    <el-col :span="20" style="float:right;"> 
                        <el-menu :default-active="$route.path" :router="true" class="el-menu-demo" style="float:right;" mode="horizontal" @select="handleSelect">
                            <el-menu-item route="/" index="1">首页</el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">主题</template>
                                <el-menu-item :route="item.url" :index="item.id" v-for="item in menudatas">{{item.nodename}}</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="4-4" route="/subjectlist">主题导航</el-menu-item>
                            <el-submenu index="3">
                              <template slot="title">中文</template>
                              <el-menu-item index="js:alert1">中文</el-menu-item>
                              <el-menu-item index="js:alert1">English</el-menu-item>
                              <el-menu-item index="js:alert1">日本语</el-menu-item>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title" ><i class="el-icon-setting" style="color:#409EFF;"></i><span style="color:#409EFF;"></span></template>
                                <!-- <el-menu-item index="4-1" route="/systemsettings">系统设置</el-menu-item> -->
                                <!-- <el-menu-item index="4-2" route="/updatepwd">修改密码</el-menu-item> -->
                                <!-- <el-menu-item index="4-3" route="/userinfo">个人信息</el-menu-item> -->
                                <el-menu-item route="/update" index="99">更新记录</el-menu-item>
                                <el-menu-item index="4-4" route="/about">关于</el-menu-item>
                                <el-menu-item index="4-3" route="/login">登录</el-menu-item>
                            </el-submenu>
                        </el-menu>
                        <!-- <el-input v-model="searchTxt" placeholder="搜索文档" style="width:200px;float:right;line-height:60px;"></el-input> -->
                    </el-col>
                </el-row>
            </el-header>
        </el-container>
    </div>
</template>

<script>
import { SubjectType, Tag, page, page_rule } from "../../data/base_data";
import { baseUrl, routerMode, baseImgPath } from "../../config/env";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      searchTxt: "",
      menudatas: [
        // { id:"11", pid:"0", nodename:'前端语言', url:"/contentshow/1/0" },
        // { id:"12", pid:"0", nodename:'交际用语', url:"/contentshow/2/0" },
        // { id:"13", pid:"0", nodename:'没得比', url:"/contentshow/3/0" },
      ]
    };
  },
  methods: {
    loadSubject: function() {
      var curpage = page;
      curpage.FilterGroup.Rules = [];
      this.menudatas = [];
      //post数据
      this.$http.post(baseUrl + "api/Admin/ContrastSubject/Read", curpage).then(
        function(res) {
          console.log(res.body.Rows);
          for (let index = 0; index < res.body.Rows.length; index++) {
            const el = res.body.Rows[index];
            this.menudatas.push({
              id: el.Id.toString(),
              pid: 0,
              nodename: el.FullName,
              url: "/contentshow/" + el.Id + "/0"
            });
          }
        },
        function(res) {
          alert("操作数据获取失败");
        }
      );
    },
    handleSelect(key, keyPath) {
      if (key.indexOf("js:") == 1) {
        this.$message({
          message: "我的学习速度没有那么快，学会了在开放！",
          type: "warning"
        });
      }
      this.$router.can;
      // this.$router.push({ path : keyPath});
      console.log(key, keyPath);
      return false;
    }
  },
  props: ["ismini","clientWidth"],
  watch: {
    clientWidth:function() {
        if (this.clientWidth < 375) {
          $(".el-submenu__title").css({ "font-size": "12px", "padding": "0 2px" });
          $(".el-menu-item").css({ "font-size": "12px", "padding": "0 10px" });
        } 
        else if (this.clientWidth < 768) {
          $(".el-submenu__title").css({ "font-size": "12px", "padding": "0 6px" });
          $(".el-menu-item").css({ "font-size": "13px", "padding": "0 10px" });
        }
        else {
          $(".el-submenu__title").css({ "font-size": "14px", "padding": "0 20px" });
          $(".el-menu-item").css({ "font-size": "14px", "padding": "0 20px" });
        }
    },
    ismini: function() {
      // this.clientWidth = document.documentElement.clientWidth;
      // if (this.ismini) {
      //   $(".el-submenu__title").css({ "font-size": "8px", padding: "0 10px" });
      //   $(".el-menu-item").css({ "font-size": "8px", padding: "0 10px" });
      // } else {
      //   $(".el-submenu__title").css({ "font-size": "14px", padding: "0 20px" });
      //   $(".el-menu-item").css({ "font-size": "14px", padding: "0 20px" });
      // }
    }
  },
  mounted: function() {
    this.loadSubject();
  }
};
</script>

<style scoped>
.el-header { height: 60px; padding:0 20px;}
.header_logo{color:#22afff;font-size:28px;float:left;line-height:50px; width:200px;}
.header_logo span{font-size:36px; }
@media screen and (min-height: 375px) { 
  .header_logo { color:#22afff;font-size:18px;float:left;line-height:40px; width:120px;}
  .header_logo span {font-size:28px;}
  .el-header { height: 60px; padding:0 0px;}
} 
@media screen and (min-height: 768px) { 
  .header_logo { color:#22afff;font-size:20px;float:left;line-height:40px; width:160px;}
  .header_logo span {font-size:28px;}
  .el-header { height: 60px; padding:0 10px;}
} 
.header_logo{
  color:#22afff;font-size:28px;float:left;line-height:60px; width:200px;
}

.el-menu--horizontal {
  border: 0px;
}
.el-row {
  height: 60px;
}
.el-col {
  border: 0px solid #e3e3e3;
  height: 60px;
}
.el-col img,
input {
  line-height: 60px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0px solid #409eff;
  color: #303133;
  font-weight: bold;
}
</style>